import React, { Component } from 'react'

class AddStu extends Component {
  constructor(props){
    super(props)
    this.stateHandler = this.stateHandler.bind(this)
    this.submit = this.submit.bind(this)
  }
  // 定义组件的装填
  state = {
    number:'',
    name:'',
    sex:'女',
    age:'',
    time:'',
    college:'大前端',
    hobbies:[
      {
        id:1,
        title:'篮球',
        isChecked:false
      },
      {
        id:2,
        title:'足球',
        isChecked:false
      },
      {
        id:3,
        title:'网球',
        isChecked:false
      }
    ]
  }
  // origin = {...this.state}
  origin = JSON.parse(JSON.stringify(this.state))

  stateHandler(e){
    const value = e.target.value
    // 获取当前输入的值
    const prop = e.target.name
    this.setState({
      [prop]:value
    })
  }
  hobbyHandler(index,e){
    const isChecked = e.target.checked
    const hobbies = [...this.state.hobbies]
    hobbies[index].isChecked = isChecked
    this.setState({
      hobbies
    })
  }
  submit(ev){
    ev.preventDefault()
    // 提交时，将表单中有空信息整合
    // 选出选中的爱好
    const hobbies = this.state.hobbies
      .filter(hobby=>hobby.isChecked)
      .map(hobby=>hobby.title)
    // 处理好的数据，整∑
    const formValue = {
      ...this.state,
      hobbies
    }
    // 提交
    this.props.addList(formValue,()=>{
      this.setState(this.origin)
    })
  }
  render() {
    return (
      <div className={'col-md-5'}>
        <form onSubmit={this.submit}>
          <div className={'form-group'}>
            <label>学号</label>
            <input 
              type="number" 
              name={'number'}
              value={this.state.number} 
              onChange={this.stateHandler} 
              className={'form-control'} 
              placeholder="请输入学号" 
            />
          </div>
          <div className={'form-group'}>
            <label>姓名</label>
            <input 
              type="text" 
              className={'form-control'} 
              placeholder="请输入姓名"
              name={'name'}
              value={this.state.name}
              onChange={this.stateHandler}
            />
          </div>
          <div className={'form-group'}>
            <label>性别&nbsp;&nbsp;</label>
            <label className={'checkbox-inline'}>
              <input 
                type="radio" 
                value="男" 
                name={'sex'}
                checked={this.state.sex === '男'}
                onChange={this.stateHandler}
              /> 男
            </label>
            <label className={'checkbox-inline'}>
              <input 
                type="radio" 
                value="女" 
                name={'sex'}
                checked={this.state.sex === '女'}
                onChange={this.stateHandler}
              /> 女
            </label>
          </div>
          <div className={'form-group'}>
            <label>年龄</label>
            <input 
              type="text" 
              className={'form-control'} 
              placeholder="请输入年龄" 
              name={'age'}
              value={this.state.age}
              onChange={this.stateHandler}
            />
          </div>
          <div className={'form-group'}>
            <label>入学时间</label>
            <input 
              className={'form-control'} 
              type="date" 
              name={'time'}
              value={this.state.time}
              onChange={this.stateHandler}
            />
          </div>
          <div className={'form-group'}>
            <label>爱好</label>
            {
              this.state.hobbies.map((hobby,index)=>{
                return (
                  <div className={'checkbox'} key={hobby.id}>
                    <label>
                      <input 
                        type="checkbox" 
                        value={hobby.title} 
                        checked={hobby.isChecked}
                        onChange={this.hobbyHandler.bind(this,index)}
                      /> {hobby.title}
                    </label>
                  </div>
                )
              })
            }
          </div>
          <div className={'form-group'}>
            <label>所属学院</label>
            <select 
              className={'form-control'} 
              name={'college'}
              value={this.state.college}
              onChange = {this.stateHandler}
            >
              <option value="大前端">大前端</option>
              <option value="Java">Java</option>
              <option value="python">python</option>
            </select>
          </div>
          <button type="submit" className={'btn btn-default'}>添加</button>
        </form>
      </div>
    )
  }
}

export default AddStu